<template>
  <div class="container">
      <div class="tagsTitle">
          选择兴趣爱好
      </div>
      <div style="padding-left:20px;">
          <span v-for="(item,index) in tags" :key="index" class="tags" :class="item.selected?'active':''" @click="selTags(item)">{{item.tag_name}}</span>
      </div>
      <div class="btn" @click="selTagsOk">
          我选好了
      </div>
  </div>
</template>

<script>
import {gettags} from "@/api/my"; 
import {posttags} from "@/api/my"; 
export default {
  components: {
     
  },

  data () {
    return {
        tags:[],
        type:"",
        selArray:[],
        tagsArray:[]
    }
  },
  methods:{
     selTagsOk(){
       if(this.type==2){
          wx.setStorage({
            key: 'selArray',
            data: this.selArray,
            success: (result) => {
               wx.navigateBack({
                  delta: 1
               });
            },
            fail: () => {},
            complete: () => {}
          });
           
           
       }else{
         posttags({tag:this.tagsArray}).then(res=>{
           if(res.code==200){
               wx.navigateBack({
                  delta: 1
               });
           }else if(res.code==201){
              
           }
         })
       }
     },
     selTags(item){
         item.selected=!(item.selected)
         this.selArray=this.tags.filter(function (v) {
            if (v.selected) return true;
            }).map(function (v) {
              return v;
         });
         this.tagsArray=this.tags.filter(function (v) {
            if (v.selected) return true;
            }).map(function (v) {
              return v.id;
         });
         console.log(this.selArray)
     }
  },
  onLoad (options) {
    Object.assign(this.$data, this.$options.data())
     this.type=options.type;
     wx.setNavigationBarTitle({
       title: '兴趣爱好',
     });
     gettags().then(res=>{
          if(res.code==200){
              let newlist = res.data.map(({
                  tag_name,
                  id
              }) => ({
                  tag_name: tag_name,
                  id: id,
                  selected: false
              }))
              
              this.tags=newlist
          }
     })  
  }
}
</script>
<style lang="scss">
.tags{
    line-height:35px;
    background:rgba(255,255,255,1);
    border:1px solid rgba(26,132,251,1);
    border-radius:18px;
    padding:0 23px;
    display:inline-block;
    text-align:center;
    font-size:14px;
    font-weight:500;
    color:rgba(26,132,251,1);
    margin-left:15px;
    margin-top:15px;
    &.active{
       color:rgba(255,255,255,1);
       background:rgba(26,132,251,1);
    }
}
.tagsTitle{
    padding:20px 0px;
    font-size:24px;
    font-weight:500;
    color:rgba(11,11,11,1);
    text-align:center;
}
.btn{
  width:315px;
  height:45px;
  background:rgba(26,132,251,1);
  box-shadow:0px 0px 4px 0px rgba(1, 63, 30, 0.35);
  border-radius:23px;
  position:fixed;
  left:0;
  right:0;
  margin:auto;
  bottom:20px;
  text-align:center;
  font-size:15px;
  line-height:45px;
  font-weight:500;
  color:rgba(255,255,255,1);
}
</style>